<template>
	<view style="width: 100%;height: 100vh;position: relative;">
		<text :style="'position: absolute;top:0;left: 0;z-index: 9999;opacity: ' + opcity">{{text}}</text>
		<image style="width: 100%;height: 100%;" src="../../static/fx.png" mode=""></image>
		<text
			style="    position: absolute;
    width: 100%;
    top: 37%;
	left: 0;
    text-align: center;"
		>
			{{ name }}
		</text>
		<image :src="imgUrl" style="position: absolute;top: 55%;left: 37%;width: 200rpx;height: 200rpx;" mode=""></image>
		<button type="warn" @click="isShow = true"  style="position: absolute;top: 75%;left: 25%;width: 50%;" size="mini">点击分享</button>
		<view class="pop flex_coum_center" @click="isShow = false" v-if="isShow">
			<xWxmlToCanvas ref="xWxmlToCanvas" @click.stop :hide="false" :width="300" :height="500" :xStyle="style" :xWxml="wxml"></xWxmlToCanvas>
			<view class="btn" @click.stop="save">保存到相册</view>
		</view>
	</view>
</template>

<script>
import xWxmlToCanvas from '../../components/x-wxml-to-canvas_1.1/x-wxml-to-canvas/x-wxml-to-canvas.vue';
import { base64src } from '../../util/util.js'
export default {
	data() {
		return {
			imgUrl: '',
			img:'',
			text:'未返回',
			opcity:0,
			isShow:false,
			name: JSON.parse(this.$store.state.userInfo).nickName,
			style: {
				content: {
					width: 300,
					height: 500,
					position: 'relative',
					borderRadius:15,
					backgroundColor: '#ccc'
				},
				img: {
					width: 300,
					borderRadius:15,
					height: 500,
					zIndex: 1,
					position: 'absolute'
				},
				name: {
					position: 'absolute',
					width: 320,
					top: 175,
					left: 0,
					textAlign: 'center',
					zIndex: 999
				},
				code: {
					position: 'absolute',
					top: 290,
					left: 100,
					width: 100,
					height: 100
					// position: absolute,
					// top: 275,
					// left: 111,
					// width: 200,
					// height: 200
				}
			}
		};
	},
	computed: {
		wxml() {
			return `<view class='content'>
				<image class='img' src='${require('../../static/fx.png')}'></image>
				
				<image src="${this.imgUrl}" class='code' mode=""></image>
			</view>`;
		}
	},
	methods: {
		saveImageToPhotosAlbum(){
			let _self =this
			uni.saveImageToPhotosAlbum({
			    filePath:_self.img,
			    success: function(r) {
					console.log(r);
					_self.text = '成功' + JSON.stringify(r)
					_self.opcity = 0
			        uni.showToast({
			            title: "保存成功",
			            icon: "none"
			        });
					
			    },
			    fail: function(err) {
					_self.text = '失败' + JSON.stringify(err)
					_self.opcity = 1
			        uni.showToast({
			            title: "保存失败",
			            icon: "none"
			        });
			    }
			});
		},
		save(){
			let _self =this
			 uni.showModal({
			                title: '提示',
			                content: '确定保存到相册吗',
			                success: function (res) {
			                    if (res.confirm) {
			                        uni.getSetting({ //获取用户的当前设置
			                        		success: (res) => {
			                        			if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
			                        				_self.saveImageToPhotosAlbum();
			                        			} else {
			                        				uni.authorize({ //如果没有授权，向用户发起请求
			                        					scope: 'scope.writePhotosAlbum',
			                        					success: () => {
			                        						_self.saveImageToPhotosAlbum();
			                        					},
			                        					fail: () => {
			                        						uni.showToast({
			                        							title: "请打开保存相册权限，再点击保存相册分享",
			                        							icon: "none",
			                        							duration: 3000
			                        						});
			                        						setTimeout(() => {
			                        							uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
			                        								success: (res2) => {
			                        									uni.showToast({
			                        										title: "打开成功，请重试保存图片",
			                        										icon: "none",
			                        										duration: 3000
			                        									});
			                        								}
			                        							});
			                        						}, 1000);
			                        					}
			                        				})
			                        			}
			                        		}
			                        	})
									
			        //                 uni.downloadFile({
			        //                         url: _self.img,//图片地址
			        //                         success: (res) =>{
											// 	console.log(res.tempFilePath)
			        //                             if (res.statusCode === 200){
			                                       
			        //                             } 
			        //                         },
											// fail(err) {
											// 	console.log('err',err)
											// }
			        //                     })
			                        
			                        
			                    } else if (res.cancel) {
			                        
			                    }
			                }
			            });
		}
	},
	components: {
		xWxmlToCanvas
	},
	onShow() {
		let that = this;
		uni.showLoading({
			title:'二维码生成中'
		})
		this.$ajax('api/Member/GetWxCode').then(res => {
			that.imgUrl = 'https://kms.hyyj.shop' + res.Data.url;
			uni.hideLoading()
		})
		// this.$ajax('api/Auth/GetAccessToken').then(res => {
		// 	console.log(res);
		// 	wx.request({
		// 		url: 'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + res.Data.access_token,
		// 		method: 'post',
		// 		responseType: 'arraybuffer',
		// 		data: {
		// 			scene: this.$store.state.openId,
		// 			path: 'pages/home/home'
		// 		},
		// 		success(pose) {
					
		// 			// console.log(pose)
		// 			var base64 = wx.arrayBufferToBase64(pose.data);
		// 			// that.imgUrl = 'data:image/PNG;base64,' + base64;
		// 			base64src('data:image/PNG;base64,' + base64, res => {
		// 			      uni.uploadFile({
		// 			      	url: 'https://kms.hyyj.shop/api/File/Upload',
		// 			      	filePath: res,
		// 			      	name: 'file',
		// 			      	formData: {
		// 			      		fileCategory: 10
		// 			      	},
		// 			      	success: er => {
		// 			      		// console.log('https://kms.hyyj.shop/upload/' +JSON.parse(er.data).Data.url)
		// 			      		that.imgUrl = 'https://kms.hyyj.shop/upload/' + JSON.parse(er.data).Data.url;
		// 						uni.hideLoading()
		// 			      	}
		// 			      });
		// 			    });
					
		// 			// that.$ajax('api/File/Upload',{
		// 			// 	'fileCategory': 10,
		// 			// 	'file':'data:image/PNG;base64,' +base64
		// 			// }).then(er => {
		// 			// 	that.imgUrl = 'https://kms.hyyj.shop/upload/' + er.Data.url
		// 			// })
		// 		},
		// 		fail(err) {
		// 			console.log(err);
		// 		}
		// 	});
		// });
	},
	watch:{
		isShow(val){
			if(val){
				uni.showLoading({
					title:'海报生成中'
				})
				setTimeout(()=>{
					// this.loading = false
					uni.hideLoading()
					this.$refs.xWxmlToCanvas.renderToCanvas().then(()=>{
						this.$refs.xWxmlToCanvas.canvasToTempFilePath().then(res => {
							this.img = res
						})
					})
				},3000)
			}
		}
	},
	onShareAppMessage(res) {
		console.log(this.$store);
		return {
			title: '分享给好友即可邀请好友',
			path: '/pages/home/home?openid=' + this.$store.state.openId
		};
	}
};
</script>

<style lang="less">
	.pop{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		left: 0;
		.btn{
			padding: 15rpx 80rpx;
			font-size: 25rpx;
			color: #fff;
			background: #f00;
			margin: 30rpx 0 0;
			border-radius: 15rpx;
		}
	}
</style>
